<%@ page language="java" pageEncoding="UTF-8"%>

<script type="text/javascript">
var photoCount = 0;

function loadPhotosSucceedCallback(data){
	if (!data.succeed) {
		$.notice(data.message);
		return;
	}
	
	if(data.data.length == 0){
		$("#photoCarousel").hide();
		$("#taskNoPhotoDiv").show();
		return;
	}
	photoCount = data.data.length;
	
	$(data.data).each(function(i, item) {
		makePhotoItem(item, i);
	});
	$("#photoCarousel").carousel("cycle");
	slidPhotoIndex();
}

function makePhotoItem(item, index){
	var listItem = $("#photoCarouselTemplate").clone();
	if(index == 0){
		listItem.children("div").addClass("active");
	}
	var spanList = listItem.find("span");
	var status = $("#taskStatus").data("code");
	if("completed" != status){
		$(spanList.get(0)).html(item.description);
	}else{
		//
		var canEditHtml = "<input type='hidden' id='photoId' maxlength='50' value= '"+ item.id + "'' /><input type='text' id='photoDescription'  maxlength='50' defaultValue='" + item.description + "' value='"+ item.description +"'/><a id='saveBtn' href='javascript:void(0);' class='btn btn-primary' onclick='doSavePhoto("+ index +")'><i class='icon-ok'></i>保存</a>";
		$(spanList.get(0)).html(canEditHtml);
		//$(spanList.get(0)).html(item.description);
	}
	
	
	
	$(spanList.get(1)).html(item.createDate);
	$(spanList.get(2)).html(item.uploadDate);
	
	var orgiUri = attachRoot + item.orgiUri;
	var smallUri = attachRoot + item.mediumUri;
	listItem.find("a[class=imageView]").attr("href", orgiUri);
	//listItem.find("a").attr("href", "photo.do?id=" + item.id);
	listItem.find("img").attr("src", smallUri);
	listItem.find("input[name=photoIndex]").val(index + 1);
	
	$("#photoCarouselInner").append(listItem.html());
}

function doSavePhoto(index){
	var photoId = $("input[id=photoId]")[index];
	var photoDescription = $("input[id=photoDescription]")[index];
	photoDescription.value = $.trim(photoDescription.value);
	if(photoDescription.value == ""){
		$.alert("照片描述不能为空！");
		resetValue(photoDescription);
		return;
	}
	if (!confirm('照片描述修改后不能还原，请谨慎操作。\n确认要修改吗？')) {
		resetValue(photoDescription);
		return;
	}
	$.ajax({
		type: "POST",
		url: "attachment/updateDescription.json",
		data: {"id": photoId.value,"description":photoDescription.value},
		dataType: "json",
		success: function(data){
			unblock("#photoCarousel");
			if(!data.succeed){
				$.alert("操作失败，原因为：\n" + data.message);
				resetValue(photoDescription);
				return;
			}
			$.info("操作成功！");
			restDefaultValue(photoDescription);
		},
		error: function(message){
			unblock("#photoCarousel");
			$.alert("操作失败：" + message);
			resetValue(photoDescription);
		}
	});
	
}
function restDefaultValue(el) {
	el.defaultValue = el.value;
}   
function resetValue(el){
	el.value=el.defaultValue;
}

function slidPhotoIndex(){
	var index = $("#photoCarouselInner .active").find("input[name='photoIndex']").val();
	$("#photoIndex").text("(" + index + "/" + photoCount + ")");
}

$(document).ready(function() {
	$('#photoCarousel').on('slid', function (e) {
		slidPhotoIndex();
	});
});

</script>

<div id="photoCarousel" class="carousel slide">
	<!-- Carousel items -->
	<div id="photoCarouselInner" class="carousel-inner">
	</div>
	<!-- Carousel nav -->
	<a class="carousel-control left" href="#photoCarousel" data-slide="prev">&lsaquo;</a>
	<a class="carousel-control right" href="#photoCarousel" data-slide="next">&rsaquo;</a>
</div>

<div id="taskNoPhotoDiv" class="well" style="display: none;">
	本任务没有现场照片！
</div>

<div id="photoCarouselTemplate" style="display: none;">
	<div class="item">
		<div style="text-align: center;">
			<a class="imageView" href="" target="_blank"><img alt="点击查看大图" src="" /></a>
			<input type="hidden" name="photoIndex" value="" />
		</div>
		<div class="carousel-caption cms-light-font">
           	<ul class="unstyled">
           		<li style="float: left; width: 600px;">照片描述：<span></span></li>
           	</ul>
           	<ul class="unstyled">
           		<li style="float: left; width: 300px;">拍照日期：<span></span></li>
           		<li style="float: left; width: 300px;">上传日期：<span></span></li>
           	</ul>
		</div>
	</div>
</div>